<template>
    <div class="com-container">
        <div class="com-echart" ref="stock_ref">
            stock
        </div>
         <ReSize :comName="'stock'"></ReSize>
    </div>
</template>

<script setup>
import { onMounted, ref, computed, onUnmounted,watch } from 'vue';
import { getStockDataService } from '@/api/index'
import { markRaw } from 'vue';
import ReSize from './ReSize.vue';
import { useThemeStore } from '@/stores';
const themeStore = useThemeStore()

const chartInstance = ref(null)
const stock_ref = ref(null)
const initChart = () => {
    chartInstance.value = markRaw(echarts.init(stock_ref.value, themeStore.currentTheme))
    //分离option的思想，将数据与其他样式的配置分离开，便于维护
    const initOption = {
        title:{
            text:'库存与销量分析',
            left:20,
            top:20
        }
    }
    chartInstance.value.setOption(initOption)
    chartInstance.value.on('mouseover', () => {
        clearInterval(timer.value)
    })
    chartInstance.value.on('mouseout', () => {
        startInterval()
    })
}



const updateChart = () => {
    const centerArr = [
        ['18%', '40%'],
        ['50%', '40%'],
        ['82%', '40%'],
        ['34%', '75%'],
        ['66%', '75%']
    ]
    const colorArr = [
        ['#4FF778', '#0BA82C'],
        ['#E5DD45', '#E8B11C'],
        ['#E8821C', '#E55445'],
        ['#5052EE', '#AB6EE5'],
        ['#23E5E5', '#2E72BF']
    ]
    const start=(currentPage.value-1)*5
    const end=currentPage.value*5
    const showData=dataList.value.slice(start,end)
    const seriesArr=showData.map((e,index)=>{
        return {
            type:'pie',
            center:centerArr[index],
            hoverAnimation:false,
            labelLine:{
                show:false
            },
            label:{
                position:'center',
                formatter: e.name + '\n\n' + e.sales,
                color:colorArr[index][0]
            },
            data:[{
                value:e.sales,
                itemStyle:{
                    color:new echarts.graphic.LinearGradient(
                        0,1,0,0,
                        [
                            {
                                offset:0,
                                color:colorArr[index][0]
                            },
                            {
                                offset:1,
                                color:colorArr[index][1]
                            },
                        ]
                    ),
                }
            },
            {
                value:e.stock,
                itemStyle: {
                    color:'#333843',
                }
            }
            ]
        }
    })
    const dataOption = {
        series:seriesArr
    }
    chartInstance.value.setOption(dataOption)
}



const dataList = ref([])
const totalPage=ref(0)
const getStockData = ret=> {
    dataList.value = ret
    totalPage.value= dataList.value.length % 5 === 0 ? dataList.value.length / 5 : dataList.value.length / 5 + 1
    updateChart()
    startInterval()
}


const screenAdaptor = () => {
    const titleFontSize = stock_ref.value.offsetWidth / 100 * 3.6
    const adaptOption = {
            title:{
                textStyle:{
                    fontSize:titleFontSize
                }
            },
            series:[
                {
                type:'pie',
                radius:[titleFontSize*3,titleFontSize*2],
                label:{
                    fontSize:titleFontSize/2
                }
                },
                {
                type: 'pie',
                radius:[titleFontSize*3,titleFontSize*2],
                label:{
                    fontSize:titleFontSize/2
                }
                },
                {
                type: 'pie',
                radius:[titleFontSize*3,titleFontSize*2],
                label:{
                    fontSize:titleFontSize/2
                }
                },
                {
                type: 'pie',
                radius:[titleFontSize*3,titleFontSize*2],
                label:{
                    fontSize:titleFontSize/2
                }
                },
                {
                type: 'pie',
                radius:[titleFontSize*3,titleFontSize*2],
                label:{
                    fontSize:titleFontSize/2
                }
                },
            ]

    }
    chartInstance.value.setOption(adaptOption)
    chartInstance.value.resize()
}


const timer = ref(null)
const currentPage=ref(1)
const startInterval = () => {
    if (timer.value) clearInterval(timer)
    timer.value = setInterval(() => {
       currentPage.value++
       if(currentPage.value>totalPage.value) currentPage.value=1
        updateChart()
    }, 2000)
}


SocketService.registerCallBack('stockData', getStockData)

defineExpose({
    screenAdaptor
})


watch(() => themeStore.currentTheme, () => {
    chartInstance.value.dispose()
    initChart()
    updateChart()
    screenAdaptor()
})

onMounted(async () => {
    initChart()
    SocketService.send({
        action: 'getData',
        socketType: 'stockData',
        chartName: 'stock',
        value: ''
    })
    window.addEventListener('resize', screenAdaptor)
    screenAdaptor()
})
onUnmounted(() => {
     clearInterval(timer.value)
    window.removeEventListener('resize', screenAdaptor)
})

</script>

<style  scoped>
.com-container{
    position: relative;
}
</style>